<template>
  <div>
    <table border="1" align="center" width="50%">
      <tr>
        <td v-if="loading">加载中.....</td>
      </tr>
      <tr>
        <td colspan="6">查询 :<input size="50" :value="searchQuery" @input="updateSearchQuery($event.target.value)"/>
          <button @click="ajax()">ajax</button>
        </td>
      </tr>
      <tr align="center">
        <td v-if="col.show" v-for="col in mycols">
          <a v-if="col.sort" href="javascript:void(0)" class="sortclass" @click="sortQry(col.col,col.sortType,col)">
            {{ col.name }}
          </a>
          <template v-else>
            {{ col.name }}
          </template>
        </td>
      </tr>
      <tr align="center" v-for="iteam in mylist">
        <td  v-if="col.show"  v-for="col in mycols">
          <p v-if="col.type">
            <component v-if="col.type" v-bind:is="col.type" :rowdata="iteam" :col="col.col" @init="initData()"></component>
          </p>
          <p v-else="col.show">{{iteam[col.col]}}</p>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import create from '../components/Create.vue'
  import GridButton from './GridButton.vue'

  console.log(  GridButton.methods);
  console.log('123123');
  export default {
    components: {
      GridButton,create
    },
    props: [
      'proplist',
      'searchQuery',
      'str',
      'mycols',
      'url'
    ],
    computed: {
      ...mapGetters({
        loading: 'loading',
        mylist: 'initDataList'
      })
    },
    methods: {
      sortQry: function(value,sortType,col) {
        var sto = this.$store
        var router = this.$router
        var self = this
        debugger


        this.$axios.get(this.url+'?sortBy='+value+'&sortType='+sortType)
          .then(function (json) {
            console.log(json);
            if(col.sortType==='desc'){
              col.sortType = 'asc'
            }
            else{
              col.sortType = 'desc'
            }

            sto.dispatch('initListLoad', json.data.list)
          })
          .catch(function(error){
            sto.commit('loading')
            alert('ajax请求数据失败');
            //     router.push('estest') //路由跳转
            router.push({name: 'foo',params: { id: 201616 }})
            console.log(error);
          });
      },
      test: function (value) {
        this.$store.dispatch('initData').then(() => {
          // ...
          debugger
          alert('加载完毕了')
        })

        this.$store.dispatch('initData')
      },
      ajax: function () {
        var sto = this.$store
        this.$axios.get(url+'?zz=123')
          .then(function (json) {
            console.log(json);
            sto.dispatch('initListLoad', json.data.list)
          })
          .catch((error) => {
            sto.commit('loading')
            alert('ajax请求数据失败');
            console.log(error);
          });
      },
      initData: function() {
        var sto = this.$store
        var router = this.$router
        var self = this
        this.$axios.get(this.url+'?zz=123')
          .then(function (json) {
            console.log(json);
            sto.dispatch('initListLoad', json.data.list)
          })
          .catch(function(error){
            sto.commit('loading')
            alert('ajax请求数据失败');
            //     router.push('estest') //路由跳转
            router.push({name: 'foo',params: { id: 201616 }})
            console.log(error);
          });
      },
      updateSearchQuery: function (value) {
        this.$store.commit('updateSearchQuery', value)
      }
    },
    created () {
      this.initData();
    }
  }

</script>
